<template>
  <!-- 告警规则 - 系统告警 -->
  <div class="SysAlarm">
    <!-- <div class="tooltips">
      <span>提示：双击告警阈值，可激活修改</span>
    </div> -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("障碍物距离阈值超声波") }}</div>
        <div class="table_edit">
          <div
            @click="editHumitureTable"
            class="edit-btn cursor-pointer"
            v-hasPermi="['task:alarmrules:sysedit']"
          >
            {{ !editUltrasonic ? $t("编辑") : $t("保存") }}
          </div>
          <div
            v-if="editUltrasonic"
            class="resets-btn"
            @click="resetHumitureTable"
            v-hasPermi="['task:alarmrules:syscalcle']"
          >
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="operationData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
              width="400"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <el-select
                    style="width: 120px"
                    v-model="scope.row.alarmThreshold[0]"
                    clearable
                    size="mini"
                    :placeholder="$t('请选择')"
                  >
                    <el-option
                      v-for="item in symbol"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    style="width: 80px; margin: 0 8px"
                    v-model="scope.row.alarmThreshold[1]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                  &nbsp; &nbsp;<span
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    >-</span
                  >&nbsp; &nbsp;
                  <el-input
                    style="width: 80px; margin-left: 8px"
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    v-model="scope.row.alarmThreshold[2]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("障碍物距离阈值激光雷达") }}</div>
        <div class="table_edit">
          <div @click="editRad" class="edit-btn cursor-pointer">
            {{ !editRadar ? $t("编辑") : $t("保存") }}
          </div>
          <div v-if="editRadar" class="resets-btn" @click="resetRad">
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="distanceData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
              width="400"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <el-select
                    style="width: 120px"
                    v-model="scope.row.alarmThreshold[0]"
                    clearable
                    size="mini"
                    :placeholder="$t('请选择')"
                  >
                    <el-option
                      v-for="item in symbol"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    style="width: 80px; margin: 0 8px"
                    v-model="scope.row.alarmThreshold[1]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                  &nbsp; &nbsp;<span
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    >-</span
                  >&nbsp; &nbsp;
                  <el-input
                    style="width: 80px; margin-left: 8px"
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    v-model="scope.row.alarmThreshold[2]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("电量阈值") }}</div>
        <div class="table_edit">
          <div @click="editEle" class="edit-btn cursor-pointer">
            {{ !editElectric ? $t("编辑") : $t("保存") }}
          </div>
          <div v-if="editElectric" class="resets-btn" @click="resetElectric">
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="electricData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
              width="400"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <el-select
                    style="width: 120px"
                    v-model="scope.row.alarmThreshold[0]"
                    clearable
                    size="mini"
                    :placeholder="$t('请选择')"
                  >
                    <el-option
                      v-for="item in symbol"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    style="width: 80px; margin: 0 8px"
                    v-model="scope.row.alarmThreshold[1]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                    :min="0"
                    :max="100"
                  ></el-input>
                  &nbsp; &nbsp;<span
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    >-</span
                  >&nbsp; &nbsp;
                  <el-input
                    style="width: 80px; margin-left: 8px"
                    size="mini"
                    placeholder="阀值"
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    v-model="scope.row.alarmThreshold[2]"
                    :min="1"
                    :max="100"
                    type="number"
                  ></el-input>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { API_getsysList, API_editRuleEnvir } from "@/api/task/alarmrules.js";
export default {
  data() {
    return {
      operationData: [], //超声波数据
      distanceData: [], //障碍物距离阈值数据
      electricData: [], //电量阈值数据
      editUltrasonic: false, //编辑超声波
      editRadar: false, //编辑障碍物距离
      editElectric: false, //编辑电量阈值
      symbol: [
        {
          value: "<",
          label: "<",
        },
        {
          value: "≤",
          label: "≤",
        },
      ],
    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    getTableList() {
      API_getsysList().then((res) => {
        if (res.code == 200) {
          this.operationData = [];
          this.distanceData = [];
          this.electricData = [];
          let data = res.data.map((item) => {
            if (
              item.alarmConditions != null &&
              item.alarmConditions[0].alarmKey
            ) {
              let alarmConditions = item.alarmConditions[0];
              if (alarmConditions.alarmEquip == "single") {
                let alarmKey = alarmConditions.alarmKey;
                let alarmValue = alarmConditions.alarmValue;
                return {
                  alarmThreshold: [alarmKey, alarmValue],
                  alarmItem: item.alarmName,
                  alarmConditions: item.alarmConditions,
                  unit: item.unit,
                  alarmRules: item.alarmContent,
                  suggest: item.alarmAdvise,
                  dateType: item.dateType,
                  alarmConditions: item.alarmConditions,
                  isEdit: false,
                  id: item.id,
                  unit: item.unit,
                  alarmKey: item.alarmKey,
                };
              } else if (
                alarmConditions.alarmEquip == "and" ||
                alarmConditions.alarmEquip == "all"
              ) {
                let alarmKey = alarmConditions.alarmKey;
                let alarmValue = alarmConditions.alarmValue;
                let alarmValue1 = alarmConditions.alarmValue1;
                return {
                  alarmThreshold: [alarmKey, alarmValue, alarmValue1],
                  alarmItem: item.alarmName,
                  alarmConditions: item.alarmConditions,
                  unit: item.unit,
                  alarmRules: item.alarmContent,
                  suggest: item.alarmAdvise,
                  dateType: item.dateType,
                  alarmConditions: item.alarmConditions,
                  isEdit: false,
                  id: item.id,
                  unit: item.unit,
                  alarmKey: item.alarmKey,
                };
              }
            } else {
              return {
                alarmThreshold: ["", "", ""],
                alarmItem: item.alarmName,
                alarmConditions: item.alarmConditions,
                unit: item.unit,
                alarmRules: item.alarmContent,
                suggest: item.alarmAdvise,
                dateType: item.dateType,
                alarmConditions: item.alarmConditions,
                isEdit: false,
                id: item.id,
                unit: item.unit,
                alarmKey: item.alarmKey,
              };
            }
          });
          data.forEach((item) => {
            if (item.dateType == 6) {
              this.operationData.push(item);
            } else if (item.dateType == 7) {
              this.distanceData.push(item);
            } else if (item.dateType == 8) {
              this.electricData.push(item);
            }
          });
        }
      });
    },
    some(item, index, array) {
      if (item.alarmConditions != null) {
        return item;
      }
    },
    // 编辑超声波
    editHumitureTable() {
      this.editUltrasonic = !this.editUltrasonic;
      this.operationData.forEach((item) => {
        if (this.editUltrasonic) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editUltrasonic == false) {
        this.getAlarmRules(this.operationData);
      }
    },
    // 取消超声波
    resetHumitureTable() {
      this.editUltrasonic = false;
      this.operationData.forEach((item) => {
        item.isEdit = false;
      });
    },
    // 编辑障碍物距离
    editRad() {
      this.editRadar = !this.editRadar;
      this.distanceData.forEach((item) => {
        if (this.editRadar) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editRadar == false) {
        this.getAlarmRules(this.distanceData);
      }
    },
    // 取消障碍物距离
    resetRad() {
      this.editRadar = false;
      this.distanceData.forEach((item) => {
        item.isEdit = false;
      });
    },
    // 编辑电量阈值
    editEle() {
      this.editElectric = !this.editElectric;
      this.electricData.forEach((item) => {
        if (this.editElectric) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editElectric == false) {
        this.getAlarmRules(this.electricData);
      }
    },
    // 取消电量阈值
    resetElectric() {
      this.editElectric = false;
      this.electricData.forEach((item) => {
        item.isEdit = false;
      });
    },
    // 提交数据
    submitData(data) {
      // 处理告警规则
      data.forEach((item) => {
        let alarmItem = item.alarmItem || "";
        let unit = item.unit || "";
        let thresholdZero = item.alarmThreshold[0] || "";
        let thresholdOne = item.alarmThreshold[1] || "";
        let thresholdTwo = item.alarmThreshold[2] || "";
        if (
          thresholdZero == ">" ||
          thresholdZero == "≥" ||
          thresholdZero == "<" ||
          thresholdZero == "≤"
        ) {
          let abnormality =
            "【告警】" + alarmItem + thresholdZero + thresholdOne + unit;
          let normal = "";
          switch (thresholdZero) {
            case ">":
              normal =
                "【正常】" + alarmItem + "≤" + item.alarmThreshold[1] + unit;
              break;
            case "≥":
              normal =
                "【正常】" + alarmItem + "<" + item.alarmThreshold[1] + unit;
              break;
            case "<":
              normal =
                "【正常】" + alarmItem + "≥" + item.alarmThreshold[1] + unit;
              break;
            case "≤":
              normal =
                "【正常】" + alarmItem + ">" + item.alarmThreshold[1] + unit;
              break;
          }
          if (item.alarmThreshold[0] == "") {
            item.alarmRules = "";
          } else {
            item.alarmRules = normal + "<br />" + abnormality;
          }
        } else {
          let abnormality =
            "【告警】" +
            alarmItem +
            thresholdOne +
            unit +
            " - " +
            thresholdTwo +
            unit;
          let normal =
            "【正常】" +
            alarmItem +
            "<" +
            item.alarmThreshold[1] +
            unit +
            "或" +
            ">" +
            item.alarmThreshold[2] +
            unit;
          if (item.alarmThreshold[0] == "") {
            item.alarmRules = "";
          } else {
            item.alarmRules = normal + "<br />" + abnormality;
          }
        }
      });
      let submit = data.map((items) => {
        if (items.alarmConditions == null) {
          items.alarmConditions = [
            {
              alarmKey: "",
              alarmValue1: "",
              alarmEquip: "",
              alarmValue: "",
            },
          ];
        }
        if (
          items.alarmThreshold[0] == ">" ||
          items.alarmThreshold[0] == "≥" ||
          items.alarmThreshold[0] == "<" ||
          items.alarmThreshold[0] == "≤"
        ) {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = "";
          items.alarmConditions[0].alarmEquip = "single";
        } else if (items.alarmThreshold[0] == "介于阀值范围") {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = items.alarmThreshold[2];
          items.alarmConditions[0].alarmEquip = "and";
        } else if (items.alarmThreshold[0] == "超出阀值范围") {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = items.alarmThreshold[2];
          items.alarmConditions[0].alarmEquip = "all";
        }
        return {
          id: items.id,
          alarmContent: items.alarmRules,
          alarmConditions: items.alarmConditions,
          unit: items.unit,
          alarmKey: items.alarmKey,
        };
      });
      let str = JSON.stringify(submit);
      return str;
    },
    // 保存表格
    getAlarmRules(data) {
      let str = this.submitData(data);
      API_editRuleEnvir(str)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(this.$t("保存成功"));
            this.operationData = []; //超声波数据
            this.distanceData = []; //障碍物距离阈值数据
            this.electricData = []; //电量阈值数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .finally(() => {
          this.getTableList();
        });
    },
  },
  filters: {
    // 处理表格显示
    getDetail(key) {
      if (key[0] == ">" || key[0] == "≥" || key[0] == "<" || key[0] == "≤") {
        return key.join("");
      } else if (key[0] == "介于阀值范围" || key[0] == "超出阀值范围") {
        return key[0] + key[1] + " - " + key[2];
      } else {
        return key[0];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.SysAlarm {
  padding: 0 24px;
}
.tooltips {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 16px;
  background: #0f1a23;
  margin-top: 24px;
  span {
    display: block;
    font-size: 14px;
    color: #ffad30;
  }
}
.tableContent {
  .table_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #00d1ff;
      padding: 24px 0 16px;
    }
    .table_edit {
      display: flex;
    }
  }
}
.el-table {
  padding-bottom: 0px;
}
.edit-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(0, 209, 255, 0.7);
  background-color: rgba(0, 209, 255, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.resets-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(219, 255, 251, 0.7);
  background-color: rgba(219, 255, 251, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin-left: 10px;
}
</style>
<style scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>
